<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>适配器模式（Adapter Pattern）</title>
    <!-- 
  适配器模式（Adapter Pattern）是一种结构型设计模式，它允许将一个类的接口转换成客户端所期望的另一种接口。适配器模式使得原本由于接口不兼容而无法一起工作的类可以一起工作。它通常用于以下场景：

  - 当你想要使用某些已经存在的类，但它们的接口与当前系统不兼容时。
  - 当你想要创建一个可以与多个不兼容接口的类一起工作的系统时。

  ### 适配器模式的主要组成部分

  1. **目标接口（Target）**：客户端所期望的接口。
  2. **源类（Adaptee）**：需要适配的类，其接口不符合客户端的需求。
  3. **适配器（Adapter）**：实现目标接口，内部持有一个源类的实例，并将目标接口的方法调用转发到源类的相应方法。

  ### 适配器模式的优点

  1. **提高了类的复用性**：可以将现有的类与新的系统结合起来，减少了重写代码的需要。
  2. **灵活性**：可以通过适配器将多个不兼容的接口整合到一个统一的接口中。
  3. **降低了系统耦合度**：客户端与具体实现解耦，提高了系统的可维护性。

  ### 适配器模式的缺点

  1. **增加了系统的复杂性**：引入适配器类可能会增加系统的复杂度，特别是在适配器数量较多的情况下。
  2. **性能开销**：由于增加了适配器层，可能会引入一些性能开销。

  ### 示例代码

  以下是一个使用适配器模式的简单示例，演示如何将一个不兼容的接口适配到客户端所期望的接口。

  #### 1. 目标接口（Target）

  ```javascript
  class Target {
      request() {
          return "默认请求";
      }
  }
  ```

  #### 2. 源类（Adaptee）

  ```javascript
  class Adaptee {
      specificRequest() {
          return "特定请求";
      }
  }
  ```

  #### 3. 适配器（Adapter）

  ```javascript
  class Adapter extends Target {
      constructor(adaptee) {
          super();
          this.adaptee = adaptee;
      }

      request() {
          return this.adaptee.specificRequest();
      }
  }
  ```

  #### 4. 使用示例

  ```javascript
  const adaptee = new Adaptee();
  const adapter = new Adapter(adaptee);

  console.log(adapter.request()); // 输出: "特定请求"
  ```

  ### 总结

  适配器模式是一种强大的设计模式，适用于需要将不兼容接口的类结合在一起的场景。通过适配器，客户端可以使用源类的功能而无需了解其内部实现。适配器模式提高了代码的复用性和灵活性，并降低了系统的耦合度。在设计系统时，合理运用适配器模式可以有效地解决接口不兼容的问题。
  --></head>

  <body>
    <script>
      // 适配器模式是一种结构型设计模式，它允许将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的类可以协同工作。

      class Target {
        request() {
          return "默认请求";
        }
      }

      class Adaptee {
        specificRequest() {
          return "特定请求";
        }
      }

      class Adapter extends Target {
        constructor(adaptee) {
          super();
          this.adaptee = adaptee;
        }

        request() {
          return this.adaptee.specificRequest();
        }
      }

      const adaptee = new Adaptee();
      const adapter = new Adapter(adaptee);
      console.log(adapter.request()); // 输出: "特定请求"
    </script>
  </body>
</html>
